<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cont{position:relative;}
        .box{padding:6px;float:left;}
        .imgbox{border:solid 1px black;padding: 6px;border-radius: 6px;}
        img{width:200px;}
    </style>
</head>
<body>
    <div class="cont">
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/1.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
    </div>
    <script>
        class Waterwater{
            constructor(){
                this.box = document.querySelectorAll('.box')
                this.boxW = this.box[0].offsetWidth
                this.clientW = document.documentElement.clientWidth
                // console.log(this.clientW)

                this.maxNum = parseInt(this.clientW / this.boxW)
                
                this.heightArr = []

                this.firstLine()
                this.otherLine()
            }
            firstLine(){
                for(let i=0;i<this.maxNum;i++){
                    this.heightArr.push(this.box[i].clientHeight)
                }
            }
            otherLine(){
                for(let i=this.maxNum;i<this.box.length;i++){
                    const min = Math.min(...this.heightArr)
                    const minIndex = this.heightArr.indexOf(min)
                    this.box[i].style.position = 'absolute'
                    this.box[i].style.top = min + 'px'
                    this.box[i].style.left = minIndex * this.boxW + 'px'
                    this.heightArr[minIndex] += this.box[i].offsetHeight
                }
            }
        }








        window.onload = function(){
            new Waterwater
        }



        /* function random(max, min){
            return Math.round(Math.random() * (max - min) + min);
        } */
    </script>
</body>
</html>